<script setup lang="ts">
	import { reactive, ref, onUnmounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getWarehouseEntrance } from '@/package_saleman/api/Home'
	import { queryParams, timeFormat } from '@/uni_modules/uview-plus';

	const today = ref(new Date());
	const year = ref(today.value.getFullYear());
	const month = ref(today.value.getMonth() + 1);

	const tabIndex = ref(0)
	const towIndex = ref(3)
	const tabIndexData = ref(0)
	const useTabs = () => {
		const tabsColumns = reactive([
			// {
			// 	name: '库存概览',
			// 	id: 1
			// },
			// {
			// 	name: '库存预警',
			// 	id: 2
			// },
			// {
			// 	name: '库存明细',
			// 	id: 3
			// }
		])
		const tabsList = reactive([
			// {
			// 	name: '日报',
			// 	id: 0
			// },
			{
				name: '月报',
				id: 0
			},
			{
				name: '年报',
				id: 1
			}
		])
		const tabsListData = reactive([
			{
				name: '按商品',
				id: 0
			},
			{
				name: '按分类',
				id: 1
			}
		])
		return {
			tabsColumns,
			tabsList,
			tabsListData
		}
	}
	const { tabsColumns, tabsList, tabsListData } = useTabs()

	const toPage = (id : number) => {
		tabIndex.value = id
		getDetail()
	}
	const toPageData = (id : number) => {
		tabIndexData.value = id
		getDetail()
	}


	const useGetDetail = () => {
		const data = ref()

		const detailInfo = ref({})

		const getDetail = async (id) => {
			// if (tabIndex.value == 0) {
			// 	data.value = timeFormat(today.value, 'yyyy-mm-dd')
			// }
			// if (tabIndex.value == 0) {
			// 	data.value = timeFormat(`${year.value}-${month.value.toString().padStart(2, '0')}`, 'yyyy-mm')
			// }
			// if (tabIndex.value == 1) {
			// 	data.value = year.value
			// }
			const params = {
				// type: towIndex.value,
				// date: data.value
				page:1,
				limit:15,
				id:id
			}
			const res = await getWarehouseEntrance(params)
			detailInfo.value = res.data
			// console.log(detailInfo.value, '212')
		}

		return {
			detailInfo,
			getDetail
		}
	}
	const { getDetail, detailInfo } = useGetDetail()

	const paging = ref<ZPagingInstance>()
	const useCURD = () => {
		const dataList = ref([])

		const getList : ZPagingEvent.Query = async (page, limit) => {
			const params = { page, limit }
			try {
				const res = await getWarehouseEntrance(params)
				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction
		}
	}
	const { dataList, getList, searchAction } = useCURD()

	const timeoutId = ref(null)

	const click = (index) => {
		towIndex.value = index.id
		// if (towIndex.value === 1) {
		// 	getDetail();
		// } else
		if (towIndex.value === 3) {
			// timeoutId.value = setTimeout(() => {
			paging.value?.reload();
			// }, 500);

		}

	}

	// 在组件销毁时清除定时器
	onUnmounted(() => {
		if (timeoutId.value !== null) {
			clearTimeout(timeoutId.value);
		}
	});
	// 跳转页面
	const toStoreDetail = (id : string) => {
		// popupShow.value = true
		getDetail(id)

	}
	const popupShow = ref(false)
	const rangeTags = [{
		title: '全部',
		value: 0
	}, {
		title: '酒水饮料',
		value: 1
	}, {
		title: '休闲食品',
		value: 2
	}, {
		title: '休闲食品',
		value: 3
	}]
	// 定义当前选中的标签
	const currentTag = ref(0);
const rangeTags1 = [{
		title: '蒙牛',
		value: 0
	},{
		title: '伊利',
		value: 1
	},{
		title: '休闲食品',
		value: 2
	},{
		title: '休闲食品',
		value: 3
	}]
	// 定义当前选中的标签
	const currentTag1 = ref(0);
	
	// 选择标签的函数
	const selectTag = (value: number) => {
	  currentTag.value = value;
	};
	// 选择标签的函数
	const selectTag1 = (value : number) => {
		currentTag1.value = value;
	};
</script>

<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="getList" :fixed="false" height="calc(100vh - 160rpx)">
			<template #top>
				<up-navbar :title="'库存'" autoBack placeholder></up-navbar>
				<view class="user_info_wrap">
					<view class="search-wrap">
						<up-search @search="searchAction" @custom="searchAction" @clear="searchAction" showAction
							actionText="搜索" animation shape="square" bgColor="rgba(243, 242, 245, 1)"
							placeholder="请输入关键字"></up-search>
					</view>
				</view>
			</template>
			<view class="main">
				<view class="main-box" v-for="(item,index) in dataList" :key="index">
					<view class="main-header">
						<view class="header-name">{{item.goods_name}}
						</view>
					</view>
					<view @click="toStoreDetail(item.id)" class="main-card">
						<view class="line"></view>
						<view class="main-jl">规格：{{item.inventory}}</view>
						<!-- <view class="distance-name">{{formatDistance(Number(item.distance))}}</view> -->

						<!-- <view class="main-jl">
							库存数量：
							<view>
								 {{val.stock_num}}{{val.unit_name}}
							</view>
							<view class="normol-type">
								正常 {{val.stock_num}}{{item.unit_name}}
							</view> -->
							<!-- <view class="warn-type">
								临期 1213件
							</view> 

						</view>-->
						<!-- <view class="main-jl">售价：{{val.sale_price}}</view>
						<view class="main-jl">条码：{{val.barcode}}</view> -->
					</view>
				</view>
			</view>
		</z-paging>
		<up-popup v-model:show="popupShow" mode="bottom" :round="10" :customStyle="{height: '75vh',padding: '36rpx'}">
			<view class="bottom-header">
				分类
				<view class="tag-container">
					<view v-for="tag in rangeTags" :key="tag.value"
						:class="{ tag: true, selected: currentTag === tag.value }" @click="selectTag(tag.value)">
						{{ tag.title }}
					</view>
				</view>
			</view>
			<view class="bottom-header">
				品牌
				<view class="tag-container">
					<view v-for="tag in rangeTags1" :key="tag.value"
						:class="{ tag: true, selected: currentTag1 === tag.value }" @click="selectTag1(tag.value)">
						{{ tag.title }}
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: rgba(242, 243, 245, 1);
	}

	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		// height: 120rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.main-box {
			width: 702rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.main-header {
				// display: flex;
				// justify-content: space-between;
				// padding: 0 12rpx;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}
			}

			.main-card {
				display: flex;
				flex-direction: column;
				gap: 12rpx;

				.line {
					width: 630rpx;
					height: 0rpx;
					margin: 20rpx 0rpx;
					border: 1px solid rgba(0, 0, 0, 0.1);
				}

				.main-jl {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(2, 14, 36, 1);
					display: flex;
					align-items: center;

					.normol-type {
						color: rgba(15, 127, 255, 1);
						border-radius: 2px;
						padding: 5rpx;
						border: 1px solid rgba(15, 127, 255, 1);
					}

					.warn-type {
						border-radius: 2px;
						padding: 5rpx;
						color: rgba(255, 84, 84, 1);
						border: 1px solid rgba(255, 84, 84, 1);
						margin-left: 12rpx;
					}
				}
			}
		}


	}

	.bottom-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin: 20rpx 0;
		.tag-container {
			display: flex;
			font-size: 24rpx;
			color: rgba(155, 157, 158, 1);
			justify-content: space-between;

			.tag {
				padding: 16rpx;
				margin-left: 20rpx;
				border-radius: 6rpx;
				// background-color: rgba(240, 240, 240, 1);
				border: 1px solid rgba(240, 240, 240, 1);

				&.selected {
					background: rgba(15, 127, 255, 0.1);
					border: 1px solid rgba(15, 127, 255, 1);
					color: rgba(15, 127, 255, 1);
				}
			}
		}
	}
</style>